body {
    font-family: PF Regal,Georgia,serif;
    font-size: 16pt;
    font-weight: 300;
    padding-top: 4em;
    background-color: #fdfdfd;
}

.book-title-container {
    width: 100%;
    text-align: center;
    margin: 73px 0 110px 0;
}

.book-title {
    font-size: 57pt;
    margin: 50px 0 70px 0;
    user-select: none;
}
.book-part-title-block {
    display: inline-block;
}
.book-part-title {
    font-size: 21pt;
    color: #656ab6;
    margin: 0 7px;
}

.book-part-title:hover {
    box-shadow: inset 0 -1px #007bff;
    text-decoration: none;
}

.book-superheading-title {
    font-size: 15pt;
    margin: 0 7px;
    color: #656ab6;
}

.article-container
{
    width: 62%;
}

strong {
    font-weight: 500;
}

p, li {
    margin: 0 0 1em;
    line-height: 1.5em;
    font-family: inherit;
}

ol, li {
    margin-top: 1em;
    margin-bottom: 1em;
}

ol {
    padding-left: 1.21em;
}

ul  {
    padding-left: 1em;
}

ol li, ul li {
    padding-left: 0.5em;	
    font-family: inherit;
    text-align: justify;
}

.image-container {
    margin-top: 2em;
    margin-bottom: 1.0em;
    text-align: center;
}

.image-container p {
    margin: 0;
}

.image-container img {
    width: fit-content;
    max-width: 100%;
    max-height: 21em;
    object-fit: contain;
}

.table-container {
    display: block;
    margin-top: 2.1em;
    width: 100%;
}

p.description {
    font-size: 0.8em;
    font-style: italic;
    text-align: center;
    margin-top: 0.5em;
}

.table-width-6 
{
    margin-left: 25%;
    margin-right: 25%;
}

.table-width-8 
{
    margin-left: 12.5%;
    margin-right: 12.5%;
}

.table-width-10 
{
    margin-left: 6.25%;
    margin-right: 6.25%;
}

.table-width-12 
{
    margin-left: 0;
    margin-right: 0;
}

table {
    width: 100%;
}

thead {
    background-color: aliceblue;
}

table th {
    font-weight: 400;
}

table td, table th {
    padding: 7px;
    border-top: solid darkgrey 1px;
    border-bottom: solid darkgrey 1px;
    border-right: dotted darkgray 1px;
    border-left: dotted darkgray 1px;
    font-size: smaller;
}

code, *[class*='lang-'] span, *[class*='lang-'] pre {
    font-family: JB Mono, monospace !important;
}

*[class*='lang-'] {
    padding: 0px 0px 25px 0px;
    font-size: 0.75em;
}


*[class*='lang-'] > div, pre > code {
    border-left-color: #eee;
    border-left-style: dotted;
    border-left-width: 3px;
    padding-left: 25px;
    display: block;
    padding-top: 20px;
    padding-bottom: 20px;
}

*[class*='lang-'] > div pre, pre > code pre {
    margin-bottom: 0;
}

p code:not(.highlight), li code:not(.highlight) {
    font-size: 0.7em;
    color: darkslateblue;
}

/* style for manual selecting */
.box {
    padding: 3px;
    border: gainsboro;
    border-width: 1px;
    border-style: solid;
}

code.highlight {
    font-family: inherit !important;
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

p code.highlight, li code.highlight {
    padding: 4px;
    background-color: #ffffa1;
}

.wide {
    width:140%;
}

p a, li a {
    text-decoration: none;
    color: inherit;
    box-shadow: inset 0 -1px #b88b59;
}

p a:hover, li a:hover {
    text-decoration: none;
    color: inherit;
    box-shadow: inset 0 -1px #0056b3;
}

blockquote h5 {
    background-color: aquamarine;
    margin: 16px 0 16px -20px;
    padding: 15px 30px 15px;
}

p img {
    width: 95%;
}

blockquote 
{
    padding-left: 0.4em;
    border-left: 0.5em solid rgba(0,0,0,.08);
    font-style: italic;
}

blockquote.big-quote, 
blockquote.breadcrumbs 
{
    background-color: transparent;
    padding: 0;
    border-left: none;
    font-style: normal;
}

blockquote.breadcrumbs, blockquote.breadcrumbs  p
{
    margin: 0;
    padding: 0;
}

blockquote p {
    padding: 1em 1em 1em 0.6em;
    font-family: inherit;
}

blockquote p code {
    font-family: consolas, monospace;
    font-size: 17px;
    padding: 4px 6px;
}

blockquote p em {
    font-weight: 400;
}

blockquote.big-quote > p {
    margin: 0.7em 0 0.7em 0;
    font-family: Charter;
    font-size: 2.5em;
    padding: 0;
    width: 130%;
    line-height: 1em;
}

.extendable::hover {
    width: 145%
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-family: inherit;
    hyphens: none;
}

h1 {
    font-size: 2.2em;
    font-family: Charter,Georgia,serif;
    font-weight: 300;
    margin: 1.8em 0 1.8em 0;
    text-align: center;
    width: 140%;
}

h2 {
    padding-top: 1em;
    padding-left: 1.5em;
    padding-right: 1.5em;
    margin-bottom: 0.5em;
    font-family: Charter, Arial, Helvetica Neue, sans-serif;
    font-size: 1.4em;
    text-align: center;
}

h3 {
    padding-top: 1em;
    font-family: Charter, Arial, Helvetica Neue, sans-serif;
    font-size: 1.15em;
    width: 70%;
}

h4 {
    padding: 1em 0 0 0;
    font-size: 1em;
    font-weight: 300;
    font-style: italic;
}

h5 {
    padding: 0.6em 0 0 0;
    font-weight: 300;
    font-size: 1.1em;
}

/* Sidenotes */

.aside-container {
    position: relative;
}
.aside-container p {
    position: relative;
    top: 9px;
}

.aside-container > .aside-side-container {
    display: block;
    position: absolute;
    top: 12px;
    left: 96%;
    width: 34%;
    font-size: 12pt;
    line-height: 20px;
    margin-left: 100px;
    z-index: 1000;
}

.aside-container > .aside-side-container p {
    line-height: 24px;
    font-size: 13pt;
    margin: 0 0 13px 0;
}

.side-regular-block p {
    top: 0;
}

/* Music side player */
.aside-side-container .music-player {
    width: 100%;
    height: 400px;
}

/* media block after h1 */
.aside-container h1 + .aside-side-container.side-media-block h2 {
    margin: 5em 0 1em 0;
    font-family: Proxima Nova,Arial,Helvetica Neue,sans-serif;
    font-weight: 600;
}

.aside-side-container > li {
    display: block;
    font-family: Charter;
}

.aside-side-container > li ul, .aside-side-container > li ol {
    padding-left: 30px;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.aside-side-container > li li {
    padding-left: 6px;
    margin: 0 0 6px;
    line-height: 22px;

    font-family: Charter;
}

.aside-side-container p {
    line-height: 25px;
    font-size: 13pt;
    margin: 0 0 15px 0;
}

.aside-side-container blockquote {
    border: aliceblue;
    border-left-style: solid;
}

li blockquote {
    margin-left: 1.5em;
}

/* Paragraphs numbering */
.paragraph-container {
    position: relative;
}

.paragraph-container p, .aside-container > p {
    text-align: justify;
}

.paragraph-container > .paragraph-left-side, .paragraph-container > .paragraph-right-side  {
    font-family: JB Mono, consolas;
    display: block;
    position: absolute;
    top: 17px;
    font-size: 10pt;
    line-height: 20px;
    color: #86abc473;
    z-index: 1000;
}
.paragraph-container > .paragraph-left-side {
    display: none;
    left: -2.1cm;
    width: 35px;
    user-select: none;
}

.paragraph-container > .paragraph-right-side  {
    display: none;
    left: 100%;
    width: 35px;
    padding-left: 45px;
    user-select: none;
}

.article-container
{
    width: 70%;
}

/* X_MENU */
.menu-title {
    text-align: center;
    margin: 35px 50px 35px 50px;
    font-size: 24pt;
    font-family: Charter;
}

.menu-container ol {
    margin: 0;
    padding: 0;
}

.menu-container ol li {
    margin: 0;
    padding: 0;
}

.header {
    height: 2.5em;
    background-color: white;
    position: relative;
    z-index: 1500;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transition: all 1s;
    top: 0;
    box-shadow: 1px -4px 20px rgba(0, 0, 0, .1);
}

.fixed {
    position: fixed !important;
}

.header > .menu {
    pointer-events: auto;
    float: right;
    height: 40px;
    font-family: Charter, 'Helvetica Neue', Arial, sans-serif;
    font-size: 1em;
    color: #fff;
    margin-top:40px;
    margin-right:40px;
}

.menu a {
    color: #fff;
}
.menu a:hover {
    text-decoration: none;
    color: #fff;
}

#menu__toggle {
    opacity: 0;
}

#menu__toggle:checked ~ .menu__btn > span {
    transform: rotate(45deg);
}
#menu__toggle:checked ~ .menu__btn > span::before {
    top: 0;
    transform: rotate(0);
    background-color: black
}
#menu__toggle:checked ~ .menu__btn > span::after {
    top: 0;
    transform: rotate(90deg);
    background-color: black
}
#menu__toggle:checked ~ .menu__box {
    visibility: visible;
    right: 0;
}

.menu__btn {
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    right: 0;
    width: 2.5em;
    height: 2.5em;
    cursor: pointer;
    z-index: 1;
    margin: 0;
    padding: 0.7em;
}

.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
    display: block;
    position: absolute;

    width: 1.1em;
    height: 1px;

    border-bottom: 1px black solid;

    transition-duration: .25s;
}
.menu__btn > span::before {
    content: '';
    top: -7px;
}
.menu__btn > span::after {
    content: '';
    top: 7px;
}

.menu__box {
    display: block;
    position: fixed;
    visibility: hidden;
    top: 0;
    right: -100%;

    width: 100%;
    height: 100%;

    margin: 0;
    padding: 80px 0;

    list-style: none;

    background-color: white;
    box-shadow: 1px 0px 6px rgba(0, 0, 0, .2);

    transition-duration: .25s;

    overflow-y: auto;
}
.menu__box li a:hover {
    text-decoration: none;
    color: inherit;
}
.menu__list {
    font-size: 0.9em;
    margin: 0 2em 0 2em;
}
.menu__list li {
    text-align: left;
}

/* X_HEADER */

.conflogo {
    margin: 0.5em 0 0 0.8em;
    font-size: 1.1em;
    font-family: Charter;
    user-select: none;
}

.invisible {
    display: none;
}

.header > .menu > div {
    display: inline;
    margin-left: 10px;
    margin-right: 10px;
}

.menu__header_current
{
    text-align: center;
    font-size: 2em;
    margin: 0 0 1em 0;
}

.menu__header_total
{
    text-align: center;
    font-size: 2.4em;
    margin: 1.7em 0 0.3em 0;
}
.menu__header_list 
{
    padding: 0;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
}
.menu__header_list > li 
{
    display: inline-block;
    width: 100%;
    margin: 0;
    text-align: center;
    font-family: charter;
}
.menu__header_total_sub
{
    font-size: 1.4em;
    margin: 2em 0 1em 0;
}
.menu__header_total_sub2
{
    font-size: 1.1em;
    margin: 1.5em 0 0.6em 1em;
    text-align: left;
}
/* X_FOOTER */

footer {
    margin-top: 2em;
    background-color: black;
    height: 4em;
    margin-left: -4cm;
    margin-right: -4cm;
    padding-left: 4cm;
    padding-right: 4cm;
}

footer > div {
    box-shadow: 0px 2px 2px rgb(0, 0, 0);
}

.footer-container {
    height: 100%;
}

.footer-wrap {
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 0;
}

.footer-wrap p {
    margin: 0;
    padding: 0px;
    line-height: 1em;
}

.footer-container img {
    height: 1.6em;
    margin-top: auto;
    margin-bottom: auto;
}

.footer-link {
    color: white;
    margin: 0 7px;
    font-size: 1em;
    box-shadow: none;
}

.footer-link:hover {
    color: salmon;
    box-shadow: none;
}

/* MEDIA */
/* XXL */
@media (min-width: 1601px) {
    .book-container
    {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* XL */
@media (max-width: 1600px) {
    .book-container
    {
        margin-left: 4cm;
        margin-right: 4cm;
    }
}

/* LG */
@media (max-width: 1400px) {
    .book-container
    {
        margin-left: 4cm;
        margin-right: 4cm;
    }

    blockquote.big-quote > p {
        font-size: 2em;
    }
    
    .table-width-6 
    {
        margin-left: 20%;
        margin-right: 20%;
    }

    .table-width-8 
    {
        margin-left: 10%;
        margin-right: 10%;
    }

    .table-width-10 
    {
        margin-left: 5%;
        margin-right: 5%;
    }
}

/* > MD */
@media (min-width: 992px) {
    .hamburger-menu {
        display: none;
    }
}

/* MD */
@media (max-width: 991px) {
    
    h3 {
        width:80%;
    }

    .book-container
    {
        margin-left: 3cm;
        margin-right: 3cm;
    }
    
    .book-title-container {
        margin: 73px 0 110px 0;
    }

    .book-title {
        font-size: 50pt;
        margin: 50px 0 70px 0;
    }

    .book-part-title {
        font-size: 19pt;
    }

    .book-part-title:hover {
        box-shadow: inset 0 -1px #007bff;
    }

    .book-superheading-title {
        font-size: 15pt;
    }                                     

    .article-container, h1 {
        width: 100%;
    }

    .aside-container p {
        top: 0;
    }

    .aside-container h1 + .aside-side-container.side-media-block h2 {
        display: none;
    }

    .wide {
        width: 100%;     
    }

    .side-regular-block {
        margin: 40px 10px;
        padding-left: 100px;
    }
    .aside-side-container .music-player {
        width: 100%;
        height: 100px;
    }
    .aside-side-container.side-media-block {
        padding: 17px 0;
    }
    .aside-side-container.side-media-block h2 {
        margin-top: 20px;
        font-size: 13pt;
        border: none;
    }

    .aside-container > .aside-side-container
    {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        height: auto;
        margin: 0;
        padding: 17px;
    }

    blockquote.big-quote > p {
        width: 100%;
        font-size: 2em;
    }

    .paragraph-container .paragraph-left-side {
        left: -55px;
    }

    body {
        font-size: 15pt;
    }

    p code:not(.highlight), li code:not(.highlight) {
        font-size: 11pt;
    }

    p, li {
        line-height: 30px;
    }
    
    li {
        margin: 0 0 10px 0;
    }

    .table-width-6 
    {
        margin-left: 25%;
        margin-right: 25%;
    }

    .table-width-8 
    {
        margin-left: 12.5%;
        margin-right: 12.5%;
    }

    .table-width-10 
    {
        margin-left: 6.25%;
        margin-right: 6.25%;
    }

    .side-regular-block {
        border-radius: 5px;
        background-image: linear-gradient(180deg,hsla(0,0%,100%,0) 60%,#fff),linear-gradient(70deg,#dbedff 32%,#ebfff0);
        padding: 22px;
    }    

    .menu__list
    {
        margin-top: 0;
        margin-bottom: 0;
    }

    .menu__list, .menu__header_total_sub2
    {
        margin-left: auto;
        margin-right: auto;
        max-width: 800px;
        width: 80%;
    }

    .book-container 
    {
        position: absolute;
        padding: 0 3cm 0 3cm;
        overflow: scroll;
        overflow-x: auto;
        top: 2.5em;
        bottom: 0;
        width: 100%;
        margin: 0;
    }

    footer {
        margin-top: 2em;
        background-color: black;
        height: 4em;
    }

    footer > div {
        position: relative;
        margin: 0 -3cm;
        background: black;
        padding: 0 3cm;
    }
}

/* Smartphone horizontal - SM */
@media (max-width: 767px) {
    .book-title-container {
        margin: 73px 0 110px 0;
    }

    h1 {
        margin: 1.8em 0em 1.8em 0.3em;
    }

    .book-title {
        font-size: 40pt;
        margin: 50px 0 70px 0;
    }

    .book-part-title {
        font-size: 19pt;
    }

    .book-part-title:hover {
        box-shadow: inset 0 -1px #007bff;
    }

    .book-superheading-title {
        font-size: 17pt;
    }

    .book-container {
        padding: 0 2.5cm;
    }
    ul {
        margin-left: 30px;
        margin-right: 30px;
        padding-left: 25px;
    }
    
    .table-width-6 
    {
        margin-left: 20%;
        margin-right: 20%;
    }

    .table-width-8 
    {
        margin-left: 10%;
        margin-right: 10%;
    }

    .table-width-10 
    {
        margin-left: 0%;
        margin-right: 0%;
    }
    
    .paragraph-container > .paragraph-left-side {
	    display: block;
        top: 14px;
        font-size: 9pt;
    }
    .paragraph-container > .paragraph-right-side {
    	display: block;
        padding-left: 40px;
        top: 14px;
        font-size: 9pt;
    }
    .footer-container img {
        height: 1.3em;
    } 
}

@media (max-width: 630px) {
    .book-container {
        padding: 0 1.5cm;
    }
    .paragraph-container > .paragraph-left-side {
        left: -33px;
    }
    .paragraph-container > .paragraph-right-side {
        padding-left: 24px;
    }
}
/* Smartphone - XS */
@media (max-width: 575px) {
    .book-container {
        padding: 0 50px 0 30px;
    }
    ul {
        margin: 0;
        padding-left: 20px;
    }

    body {
        font-size: 13pt;
    }

    p code:not(.highlight), li code:not(.highlight) 
    {
        font-size: 10pt;
        padding: 3px;
    }

    *[class*='lang-'] > div, pre > code {
        padding-left: 15px;
        padding-top: 15px;
        padding-bottom: 15px;
    }
    
    ol li, ul li {
        padding-left: 0.2em;	
    }
    
    p, li {
        line-height: 24px;
    }    

    .table-width-6 
    {
        margin-left: 0;
        margin-right: 0;
    }

    .table-width-8 
    {
        margin-left: 0%;
        margin-right: 0%;
    }

    .table-width-10 
    {
        margin-left: 0%;
        margin-right: 0%;
    }
    
    .paragraph-container .paragraph-left-side 
    {
        display: none;        
    }
    .paragraph-container .paragraph-right-side 
    {
        padding-left: 21px;
        top: 3px;
	    font-size: 8pt;
    }
    .footer-container img {
        height: 1em;
    } 
    .menu__list {
        margin: 0 1em 0 1em;
    }
    .menu__header_total_sub2
    {
        margin: 1.5em 0 0.6em 1em;
    }
}

/* Fonts */

@font-face {
    font-family: 'PF Regal';
    src: url('./fonts/PFRegalTextPro-Bold.eot');
    src: local('./fonts/PFRegalTextPro-Bold'),
        url('./fonts/PFRegalTextPro-Bold.woff2') format('woff2'),
        url('./fonts/PFRegalTextPro-Bold.woff') format('woff'),
        url('./fonts/PFRegalTextPro-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'PF Regal';
    src: url('./fonts/PFRegalTextPro-Medium.eot');
    src: local('./fonts/PFRegalTextPro-Medium'),
        url('./fonts/PFRegalTextPro-Medium.woff2') format('woff2'),
        url('./fonts/PFRegalTextPro-Medium.woff') format('woff'),
        url('./fonts/PFRegalTextPro-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'PF Regal';
    src: url('./fonts/PFRegalTextPro-BlackItalic.eot');
    src: local('./fonts/PFRegalTextPro-BlackItalic'),
        url('./fonts/PFRegalTextPro-BlackItalic.woff2') format('woff2'),
        url('./fonts/PFRegalTextPro-BlackItalic.woff') format('woff'),
        url('./fonts/PFRegalTextPro-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'PF Regal';
    src: url('./fonts/PFRegalTextPro-Black.eot');
    src: local('./fonts/PFRegalTextPro-Black'),
        url('./fonts/PFRegalTextPro-Black.woff2') format('woff2'),
        url('./fonts/PFRegalTextPro-Black.woff') format('woff'),
        url('./fonts/PFRegalTextPro-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'PF Regal UBlack';
    src: url('./fonts/PFRegalTextPro-UBlack.eot');
    src: local('./fonts/PFRegalTextPro-UBlack'),
        url('./fonts/PFRegalTextPro-UBlack.woff2') format('woff2'),
        url('./fonts/PFRegalTextPro-UBlack.woff') format('woff'),
        url('./fonts/PFRegalTextPro-UBlack.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'PF Regal';
    src: url('./fonts/PFRegalTextPro-MediumItalic.eot');
    src: local('./fonts/PFRegalTextPro-MediumItalic'),
        url('./fonts/PFRegalTextPro-MediumItalic.woff2') format('woff2'),
        url('./fonts/PFRegalTextPro-MediumItalic.woff') format('woff'),
        url('./fonts/PFRegalTextPro-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'PF Regal';
    src: url('./fonts/PFRegalTextPro-UBlackItalic.eot');
    src: local('./fonts/PFRegalTextPro-UBlackItalic'),
        url('./fonts/PFRegalTextPro-UBlackItalic.woff2') format('woff2'),
        url('./fonts/PFRegalTextPro-UBlackItalic.woff') format('woff'),
        url('./fonts/PFRegalTextPro-UBlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'PF Regal';
    src: url('./fonts/PFRegalTextPro-RegularAItalic.eot');
    src: local('./fonts/PFRegalTextPro-RegularAItalic'),
        url('./fonts/PFRegalTextPro-RegularAItalic.woff2') format('woff2'),
        url('./fonts/PFRegalTextPro-RegularAItalic.woff') format('woff'),
        url('./fonts/PFRegalTextPro-RegularAItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'PF Regal';
    src: url('./fonts/PFRegalTextPro-BoldItalic.eot');
    src: local('./fonts/PFRegalTextPro-BoldItalic'),
        url('./fonts/PFRegalTextPro-BoldItalic.woff2') format('woff2'),
        url('./fonts/PFRegalTextPro-BoldItalic.woff') format('woff'),
        url('./fonts/PFRegalTextPro-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Charter';
    src: url('./fonts/charter-regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/*  Regular B */
@font-face {
    font-family: 'PF Regal';
    src: url('./fonts/PFRegalTextPro-RegularBItalic.eot');
    src: local('./fonts/PFRegalTextPro-RegularBItalic'),
        url('./fonts/PFRegalTextPro-RegularBItalic.woff2') format('woff2'),
        url('./fonts/PFRegalTextPro-RegularBItalic.woff') format('woff'),
        url('./fonts/PFRegalTextPro-RegularBItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'PF Regal';
    src: url('./fonts/PFRegalTextPro-RegularB.eot');
    src: local('./fonts/PFRegalTextPro-RegularB'),
        url('./fonts/PFRegalTextPro-RegularB.woff2') format('woff2'),
        url('./fonts/PFRegalTextPro-RegularB.woff') format('woff'),
        url('./fonts/PFRegalTextPro-RegularB.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'JB Mono';
    src: url('./fonts/JetBrainsMono-Regular.eot');
    src: local('./fonts/JetBrainsMono-Regular'),
        url('./fonts/JetBrainsMono-Regular.woff2') format('woff2'),
        url('./fonts/JetBrainsMono-Regular.woff') format('woff'),
        url('./fonts/JetBrainsMono-Regular.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'JB Mono';
    src: url('./fonts/JetBrainsMono-Italic.eot');
    src: local('./fonts/JetBrainsMono-Italic'),
        url('./fonts/JetBrainsMono-Italic.woff2') format('woff2'),
        url('./fonts/JetBrainsMono-Italic.woff') format('woff'),
        url('./fonts/JetBrainsMono-Italic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'JB Mono';
    src: url('./fonts/JetBrainsMono-Medium.eot');
    src: local('./fonts/JetBrainsMono-Medium'),
        url('./fonts/JetBrainsMono-Medium.woff2') format('woff2'),
        url('./fonts/JetBrainsMono-Medium.woff') format('woff'),
        url('./fonts/JetBrainsMono-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'JB Mono';
    src: url('./fonts/JetBrainsMono-Medium-Italic.eot');
    src: local('./fonts/JetBrainsMono-Medium-Italic'),
        url('./fonts/JetBrainsMono-Medium-Italic.woff2') format('woff2'),
        url('./fonts/JetBrainsMono-Medium-Italic.woff') format('woff'),
        url('./fonts/JetBrainsMono-Medium-Italic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}
@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("./fonts/webfonts/fa-regular-400.eot");
    src: url("./fonts/webfonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), 
         url("./fonts/webfonts/fa-regular-400.woff2") format("woff2"), 
         url("./fonts/webfonts/fa-regular-400.woff") format("woff"), 
         url("./fonts/webfonts/fa-regular-400.ttf") format("truetype"), 
         url("./fonts/webfonts/fa-regular-400.svg#fontawesome") format("svg"); 
    font-display: swap;
}
    
.fa {
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
    font-display: swap;
}
@font-face {
  font-family: 'Font Awesome 5 Brands';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("./fonts/fa-brands-400.eot");
  src: url("./fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"), url("./fonts/fa-brands-400.woff2") format("woff2"), url("./fonts/fa-brands-400.woff") format("woff"), url("./fonts/fa-brands-400.ttf") format("truetype"), url("./fonts/fa-brands-400.svg#fontawesome") format("svg"); 
}

.fab {
  font-family: 'Font Awesome 5 Brands';
  font-weight: 400; 
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("./fonts/fa-regular-400.eot");
  src: url("./fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"), url("./fonts/fa-regular-400.woff2") format("woff2"), url("./fonts/fa-regular-400.woff") format("woff"), url("./fonts/fa-regular-400.ttf") format("truetype"), url("./fonts/fa-regular-400.svg#fontawesome") format("svg"); 
}

.far {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400; 
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url("./fonts/fa-solid-900.eot");
  src: url("./fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"), url("./fonts/fa-solid-900.woff2") format("woff2"), url("./fonts/fa-solid-900.woff") format("woff"), url("./fonts/fa-solid-900.ttf") format("truetype"), url("./fonts/fa-solid-900.svg#fontawesome") format("svg"); 
}